Highcharts ব্যবহারকারীদের জন্য বিভিন্ন accessibility ফিচার প্রদান করে, যাতে চার্টটি সকল ব্যবহারকারীর জন্য অ্যাক্সেসিবল এবং ব্যবহারে সহজ হয়, বিশেষ করে যারা ভিজ্যুয়ালি ইম্পেয়ারড (visually impaired) বা দৃষ্টিহীন (blind)। Highcharts এর accessibility options এর মাধ্যমে আপনি চার্টের উপাদানগুলোকে আরও এক্সপ্লোরেবল, স্ক্রীন রিডার এবং কিবোর্ড নেভিগেশনের জন্য উপযোগী করতে পারেন।
Accessibility Options কাস্টমাইজেশন
Highcharts এ accessibility কাস্টমাইজেশন কিছু বিশেষ অপশন ব্যবহার করে করা যায়, যেমন স্ক্রীন রিডার সমর্থন, কিবোর্ড শটকাট, আউটপুট লেবেল, এবং অন্যান্য visual aid ফিচার।
১. Accessibility Options চালু করা
Highcharts এ accessibility সক্রিয় করতে accessibility.enabled অপশন ব্যবহার করা হয়। এটি চার্টের জন্য একটি মৌলিক অ্যাক্সেসিবিলিটি সাপোর্ট যোগ করে, যা স্ক্রীন রিডার এবং কিবোর্ড নেভিগেশন ব্যবহারের সুবিধা প্রদান করে।
উদাহরণ: Accessibility চালু করা
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Accessibility Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Sales Data'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}],
accessibility: {
enabled: true // accessibility ফিচার চালু করা
}
});
</script>
</body>
</html>
এখানে, accessibility.enabled: true দিয়ে অ্যাক্সেসিবিলিটি সক্রিয় করা হয়েছে।
২. স্ক্রীন রিডার সাপোর্ট
Highcharts এ screen reader এর জন্য বিশেষভাবে কাস্টমাইজড ডেটা এবং টেক্সট লেবেল প্রদান করা যায়। এটি ভিজ্যুয়াল ইম্পেয়ারড ব্যবহারকারীদের জন্য উপযোগী, যারা স্ক্রীন রিডার ব্যবহার করেন। accessibility.pointDescriptionFormatter ব্যবহার করে পয়েন্টের বর্ণনা কাস্টমাইজ করা যেতে পারে।
উদাহরণ: স্ক্রীন রিডার সাপোর্ট কাস্টমাইজ করা
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Screen Reader Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Accessibility and Screen Reader Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}],
accessibility: {
enabled: true, // accessibility সক্রিয় করা
pointDescriptionFormatter: function(point) {
return point.category + ': ' + point.y + ' units of sales'; // পয়েন্টের স্ক্রীন রিডার ফরম্যাট কাস্টমাইজ করা
}
}
});
</script>
</body>
</html>
এখানে, pointDescriptionFormatter ব্যবহার করে পয়েন্টের জন্য স্ক্রীন রিডার ফরম্যাট কাস্টমাইজ করা হয়েছে, যাতে স্ক্রীন রিডারে বিক্রয়ের পরিমাণ বা তথ্য সঠিকভাবে শোনা যায়।
৩. কিবোর্ড নেভিগেশন
Highcharts কিবোর্ড ব্যবহারকারীদের জন্য keyboard navigation সাপোর্ট প্রদান করে। এর মাধ্যমে আপনি কিবোর্ডের মাধ্যমে চার্টের উপাদানগুলোতে নেভিগেট করতে পারবেন, যেমন arrow keys (বাম এবং ডান), tab, enter ইত্যাদি।
উদাহরণ: কিবোর্ড নেভিগেশন চালু করা
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Keyboard Navigation Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Sales Data'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}],
accessibility: {
enabled: true, // accessibility সক্রিয় করা
keyboardNavigation: {
enabled: true // কিবোর্ড নেভিগেশন চালু করা
}
}
});
</script>
</body>
</html>
এখানে, keyboardNavigation.enabled: true দিয়ে কিবোর্ড নেভিগেশন সক্ষম করা হয়েছে। এর ফলে ব্যবহারকারী কিবোর্ডের সাহায্যে চার্টের উপর নেভিগেট করতে পারবেন।
৪. Tooltip এবং Descriptions কাস্টমাইজেশন
Highcharts এ Tooltip এবং descriptions কাস্টমাইজ করে আপনি screen reader বা keyboard navigation ব্যবহারকারীদের জন্য আরও উপযোগী এবং অ্যাক্সেসিবল তৈরি করতে পারেন।
উদাহরণ: Tooltip কাস্টমাইজেশন
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Tooltip Customization</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Data'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
tooltip: {
pointFormat: 'Sales in {point.category}: {point.y} units'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}],
accessibility: {
enabled: true,
pointDescriptionFormatter: function(point) {
return 'In ' + point.category + ', ' + point.series.name + ' had ' + point.y + ' units sold.';
}
}
});
</script>
</body>
</html>
এখানে, tooltip.pointFormat এবং pointDescriptionFormatter ব্যবহার করে টুলটিপের কন্টেন্ট কাস্টমাইজ করা হয়েছে, যা স্ক্রীন রিডার এবং কিবোর্ড নেভিগেশনের জন্য উপযুক্ত।
উপসংহার
Highcharts এর accessibility options ব্যবহার করে আপনি চার্টের কন্টেন্টকে visually impaired ব্যবহারকারীদের জন্য আরও উপযোগী এবং অ্যাক্সেসিবল করে তুলতে পারেন। আপনি স্ক্রীন রিডার, কিবোর্ড নেভিগেশন, টুলটিপ কাস্টমাইজেশন এবং পয়েন্ট ডেসক্রিপশন ফরম্যাটিং-এর মাধ্যমে আপনার চার্টের অ্যাক্সেসিবিলিটি বাড়াতে পারেন। এই ফিচারগুলি চার্টের ব্যবহারের অভিজ্ঞতাকে আরও উন্নত করে এবং একে সমস্ত ব্যবহারকারীদের জন্য সহজলভ্য করে তোলে।
Read more
